<template>
  <el-form
    size="small"
    :model="formData"
    ref="formRef"
    label-width="130px"
  >
    <el-row>
      <el-col :span="8" v-show="fieldList.includes('type')">
        <el-form-item
          label="类型："
          prop="type"
        >
          <el-select
            clearable
            v-model="formData.type"
            :popper-append-to-body="false"
            placeholder="请选择"
          >
            <el-option
              label="处理单量"
              value="1"
            />
            <el-option
              label="总体通过率"
              value="2"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-show="fieldList.includes('economic')">
        <el-form-item
          label="经济事项:"
          prop="economic"
        >
          <el-select
            clearable
            v-model="formData.economic"
            :popper-append-to-body="false"
            placeholder="请选择"
          >
            <el-option
              label="处理单量"
              value="1"
            />
            <el-option
              label="总体通过率"
              value="2"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-show="fieldList.includes('daterange')">
        <el-form-item
          label="时间范围:"
          prop="daterange"
        >
          <el-select
            clearable
            v-model="formData.daterange"
            :popper-append-to-body="false"
            placeholder="请选择"
          >
            <el-option
              label="处理单量"
              value="1"
            />
            <el-option
              label="总体通过率"
              value="2"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-show="fieldList.includes('transferReason')">
        <el-form-item
          label="转办原因:"
          prop="transferReason"
        >
          <el-select
            clearable
            v-model="formData.transferReason"
            :popper-append-to-body="false"
            placeholder="请选择"
          >
            <el-option
              label="处理单量"
              value="1"
            />
            <el-option
              label="总体通过率"
              value="2"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-show="fieldList.includes('isPayed')">
        <el-form-item
          label="是否涉及付款:"
          prop="isPayed"
        >
          <el-select
            clearable
            v-model="formData.isPayed"
            :popper-append-to-body="false"
            placeholder="请选择"
          >
            <el-option
              label="是"
              value="1"
            />
            <el-option
              label="否"
              value="0"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    
  </el-form>
</template>

<script>
export default {
  props: ['fieldList'],
  data() {
    return {
      formData: {
        type: '',
        economic: '',
        daterange: '',
        transferReason: '',
        isPayed: '',
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log('formData:', this.formData);
        } else {
          console.log('error submit!!');
        }
      });
    }
  }
}
</script>


<style lang="scss" scoped>
  .el-form {
    margin: 0 30px 0 20px;
  }
  ::v-deep .el-form-item__label {
    color: #fff;
  }
  ::v-deep .el-form-item__content {
    color: #fff;
  }
  .el-select {
    width: 100%;
    background: url("../css/dialogSelectBg-dark.png") no-repeat;
    background-size: 100% 100%;
  }
  ::v-deep .el-input__inner {
    padding: 0 20px;
    color: #fff;
    border: none;
    background: transparent;
  }

  // 设置下拉框的背景颜色及边框属性；
  ::v-deep .el-select-dropdown {
    // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
    // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示；
    background-color: darkslategrey !important;
    color: #fff;
    position: absolute !important;
    // top: 0 !important;
    left: 0 !important;
    border: 1px solid rgba(15, 120, 255, 0.24);
  }
  // 设置下拉框的字体属性及背景颜色；
  .el-select-dropdown__item {
    color: #fff;
    background-color: transparent;
  }
  // 设置下拉框列表的 padding 值为：0；(即：样式调整)
  ::v-deep.el-select-dropdown__list {
    padding: 0;
  }
  // 设置输入框与下拉框的距离为：0; (即：样式调整)
  ::v-deep.el-popper[x-placement^=bottom] {
    margin-top: 0px;
    background: transparent;
  }
  .el-select-dropdown__item:hover {
    color: #fff;
    background-color: rgba(15, 120, 255, 0.24);
  }
  .el-select-dropdown__item.selected {
    color: #fff;
    background-color: rgba(15, 120, 255, 0.24);
  }
  /* // 下拉框箭头颜色 */
  ::v-deep .el-icon-arrow-up:before {
    // color: #4EEAFF;
    color: transparent;
    background: url("../css/arrow-dark.png") no-repeat;
    // background-size: 100% 100%;
    background-size: 14px 10px;
  }
  // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头)
  ::v-deep.el-popper .popper__arrow,
  ::v-deep.el-popper .popper__arrow::after {
    display: none;
  }


</style>
